<script setup lang="ts">
import { ref, toRef, PropType } from 'vue'
type OT = {
  foo: number
  bar: number
}
// 方式一：使用传递字面量类型的纯类型语法作为参数
// const props = defineProps<{
//   msg: OT,
//   count?: number
// }>()

interface Props {
  msg: OT,
  count?: number
}
// 使用 withDefaults 编译器宏，可以给使用类型声明的prop提供默认值
const props = withDefaults(defineProps<Props>(), {
  msg: () => {
    return {
      foo: 2,
      bar: 2
    }
  },
  count: 1
})

// 方式二：
// PropType 在定义运行时 props 时用更高阶的类型定义来标注一个 prop
// const props = defineProps({
//   msg: {
//     type: Object as PropType<OT>,
//     default: () => {},
//     required: true
//   }, // 提供一个比 Object 更具体的类型
//   count: Number
// })
console.log(props)
const bar = toRef(props.msg, 'bar')
const getFeature = (() => {
  bar.value++
})

const count = ref(0)

defineExpose({
  bar,
  c: count
})
</script>

<template>
  <h1>{{ msg }}</h1>

  <div>
    <button type="button" @click="getFeature">{{ bar }}</button>
  </div>
</template>

<style scoped>
</style>
